<template>
  <div>
    <public-modal
      width="580px"
      :footer="false"
      :title="title"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content" class="form-wrapper">
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          class="form-table-style"
          autocomplete="off"
          layout="inline"
          labelAlign="left"
          :labelCol="{ style: 'width: 100px' }"
        >
          <a-row type="flex">
            <a-col flex="1">
              <a-row type="flex">
                <a-col flex="auto">
                  <a-form-model-item label="行为表现分类" prop="activityType" :colon="false">
                    <a-select allowClear v-model="form.activityType" placeholder="请选择">
                      <a-select-option :value="item.value" v-for="(item, index) in parentStatusList" :key="index">
                        {{ item.text }}</a-select-option
                      >
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <!--  <a-col flex="360px">
                    <a-form-model-item label="身份证号" prop="idCard" :colon="false">
                      <a-input :maxLength="30" autocomplete="off" placeholder="请输入" v-model="form.idCard" />
                    </a-form-model-item>
                  </a-col> -->
              </a-row>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col flex="1">
              <a-row type="flex">
                <a-col flex="auto">
                  <a-form-model-item label="分类等级" prop="activityType" :colon="false">
                    <a-select allowClear v-model="form.activityType" placeholder="请选择">
                      <a-select-option :value="item.value" v-for="(item, index) in activityTypeList" :key="index">
                        {{ item.text }}</a-select-option
                      >
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col flex="1">
              <a-row type="flex">
                <a-col flex="auto">
                  <a-form-model-item label="具体表现" prop="activityType" :colon="false">
                    <a-select allowClear v-model="form.activityType" placeholder="请选择">
                      <a-select-option :value="item.value" v-for="(item, index) in activityTypeList" :key="index">
                        {{ item.text }}</a-select-option
                      >
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col flex="auto">
              <a-form-model-item label="发现时间" prop="judgmentTime" :colon="false">
                <a-date-picker v-model="form.judgmentTime" placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <!--  <a-col flex="360px">
                    <a-form-model-item label="血型" prop="bloodType" :colon="false">
                      <a-select allowClear v-model="form.bloodType" placeholder="请选择">
                        <a-select-option :value="item.value" v-for="(item, index) in bloodList" :key="index">
                          {{ item.text }}</a-select-option
                        >
                      </a-select>
                    </a-form-model-item>
                  </a-col> -->
          </a-row>

          <a-row type="flex">
            <a-col flex="auto">
              <a-form-model-item label="情况说明" :colon="false" prop="description">
                <a-textarea :maxLength="50" placeholder="请填写" v-model="form.scopeDescription" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row type="flex" style="" class="imageRow">
            <a-col flex="auto" style="height: 1.4rem">
              <a-form-model-item label="佐证照片" :colon="false" prop="imageUrl">
                <a-upload
                  :customRequest="customRequest"
                  :file-list="fileList"
                  :beforeUpload="() => false"
                  :remove="remove"
                  :showUploadList="showUploadList"
                  accept="image/png, image/JPG,image/jpeg"
                  name="file"
                  list-type="picture-card"
                  class="avatar-uploader"
                  @change="uploadChange"
                >
                  <div style="margin-top: 22px; margin-left: 6px" v-if="fileList.length < 3">
                    <img alt="" class="pictIcon" src="@/assets/imgs/upload.png" />
                    <!--  <p class="imgText">点击上传</p> -->
                  </div>
                </a-upload>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row type="flex" class="imageRow" style="border-top: none">
            <a-col flex="auto" style="height: 1.4rem">
              <a-form-model-item label="佐证音频" :colon="false">
                <div v-if="audioList.length">
                  <a-upload
                    :customRequest="customRequestAudio"
                    :file-list="audioList"
                    :remove="remove"
                    accept="audio/*"
                    name="file"
                    class="avatar-uploader"
                  >
                    <div style="margin-top: 22px; margin-left: 6px" v-if="audioList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/upload.png" />
                      <!--  <p class="imgText">点击上传</p> -->
                    </div>
                  </a-upload>
                </div>
                <div class="audioContainer" v-else></div>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { uploadFile } from '@/api/api'
import { checkIDCard } from '@/utils/validate.js'
import publicModal from '@/components/publicModal'
import { putAction, postAction } from '@/api/manage'
import { isMobile } from '@/utils/validate'
import { getDictItemsFromCache, ajaxGetDictItems } from '@/api/api'
import { getPrefixImg, previewImage } from '../../../../utils/util'
import moment from 'moment'
import { getFileAccessHttpUrl } from '../../../../api/manage'

export default {
  name: 'addPatientModal',
  components: { publicModal },
  props: {
    tid: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      title: '新增',
      record: {},
      status: 0,
      publicVisible: false,
      imageUrl: [],
      fileList: [],
      audioList: [],
      showUploadList: { showPreviewIcon: false },
      form: {},
      rules: {
        guardian: [{ required: true, message: '请输入监护人姓名!' }],
        guardianRel: [{ required: true, message: '请选择与监护人关系!' }],
        guardianPhone: [{ required: true, message: '请输入监护人联系电话!' }],
        idCard: [
          { required: true, message: '请输入身份证号!' },
          {
            validator: (rule, value, callback) => {
              if (!checkIDCard(value)) {
                callback(new Error('请输入正确的身份证号'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      politicalList: getDictItemsFromCache('political_outlook'),
      nationList: getDictItemsFromCache('nation'),

      sexList: getDictItemsFromCache('sex_type'),
      activityTypeList: [],
      parentStatusList: [],
      actionType: '',
      uploadImgRef: null,
      imgPrefix: getPrefixImg(),
    }
  },
  //inject: ['provideData'],
  mounted() {
    this.getFiveList()
  },
  methods: {
    async getFiveList() {
      let { result } = await ajaxGetDictItems({ code: 'five_green_types' })
      this.fiveList = result
    },
    async show(record = {}, actionType = 'add') {
      this.actionType = actionType
      this.record = record
      this.publicVisible = true

      if (actionType == 'edit') {
        this.title = `编辑行为表现`
        this.form = { ...record }
        console.log(this.form)
        if (record.userImg) {
          const obj = {
            uid: record.userImg,
            name: record.userImg,
            status: 'done',
            url: this.imgPrefix + record.userImg,
          }
          this.fileList = [obj]
          this.imageUrl = [{ halfPath: record.userImg }]
        }
      } else {
        this.title = `新增行为表现`
        this.$set(this.form, 'minorId', this.tid)
      }
    },

    remove(file) {
      console.log('remove')
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
      // 上传完成之后，隐藏上传框
      let uploadDom = this.$refs.uploadImgRef.$el.getElementsByClassName('ant-upload-select-picture-card')[0]
      uploadDom.style.display = 'flex'
    },
    async customRequest(info) {
      console.log('自定义上唇')
      console.log(info, '上传')
      let file = info.file
      const formData = new FormData()
      formData.append('file', file)
      formData.append('type', 2)
      let res = await uploadFile(formData)
      console.log(res, '上传结果')
      if (res.code == 200) {
        // this.imageUrl = [res.result]
        //this.imageUrl.push(res.result.halfPath)
        this.form.imageUrl = res.result.halfPath
        const newFile = {
          uid: Date.now(), // 唯一即可
          name: file.name, // 原文件名
          status: 'done',
          url: res.result.fullPath, // 必须是 http 开头
        }
        // this.fileList = [res.result].map((item, index) => {
        //   return {
        //     uid: index,
        //     status: 'done',
        //     url: item.fullPath,
        //     name: file.name,
        //   }
        // })
        this.fileList.push(newFile)

        console.log(this.fileList, '提【i俺们列表')

        // 上传完成之后，隐藏上传框
        // let uploadDom = this.$refs.uploadImgRef.$el.getElementsByClassName('ant-upload-select-picture-card')[0]
        // uploadDom.style.display = 'none !important'
      }
    },
    async customRequestAudio(info) {
      console.log('上传音频')

      console.log(info, '上传音频')
      let file = info.file
      if (!file.type.includes('audio')) {
        this.$message.error('请上传音频文件')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      //  formData.append('type', 2)
      let res = await uploadFile(formData)
      console.log(res, '上传结果')
      if (res.code == 200) {
        // this.imageUrl = [res.result]
        //this.imageUrl.push(res.result.halfPath)
        this.form.audioUrl = res.result.halfPath
        const newFile = {
          uid: Date.now(), // 唯一即可
          name: file.name, // 原文件名
          status: 'done',
          url: res.result.fullPath, // 必须是 http 开头
        }
        // this.fileList = [res.result].map((item, index) => {
        //   return {
        //     uid: index,
        //     status: 'done',
        //     url: item.fullPath,
        //     name: file.name,
        //   }
        // })
        this.audioList.push(newFile)

        // 上传完成之后，隐藏上传框
        // let uploadDom = this.$refs.uploadImgRef.$el.getElementsByClassName('ant-upload-select-picture-card')[0]
        // uploadDom.style.display = 'none !important'
      }
    },
    uploadChange({ file, fileList }) {
      file.status = 'done'
      this.fileList = fileList
    },

    handleOk() {
      console.log('dianjiqueding ', this.tid)
      this.$refs.form.validate(async (valid) => {
        if (!valid) return

        let url = ''
        if (this.actionType == 'add') {
          url = '/qnMinorGuardian/addMinorGuardian'
        } else {
          url = '/qnMinorGuardian/updateMinorGuardian'
        }
        const method = this.tid ? postAction : postAction
        try {
          const res = await method(url, {
            ...this.form,
            minorId: this.tid,
          })
          this.$message.success(res.message)
          this.$emit('refresh')
          this.cancel()
        } catch (error) {
          // 处理错误
          console.error('请求失败:', error)
          this.$message.error('请求失败，请稍后重试！')
        }
      })
    },
    handleAdd() {
      this.$refs.addRef.show()
    },

    cancel() {
      this.publicVisible = false
      this.fileList = []
      this.imageUrl = []
      this.form = {}
    },
    handlePreview(urls = []) {
      urls = urls.map((item) => item.halfPath)
      previewImage.call(this, urls)
    },
    /*  async customRequest(info) {
      let file = info.file
      const formData = new FormData()
      formData.append('file', file)
      if (this.status == 0) formData.append('type', 2)
      else if (this.status == 1) formData.append('type', 63)
      else if (this.status == 2) formData.append('type', 64)
      let res = await uploadFile(formData)
      if (res.code == 200) {
        this.imageUrl.push(res.result.halfPath)
      }
    },
    uploadChange({ file, fileList }) {
      file.status = 'done'
      this.fileList = fileList
    }, */
  },
}
</script>

<style scoped lang="less">
.form-row {
  display: flex;

  flex-wrap: nowrap; /* 禁止换行 */

  align-items: flex-start; /* 顶部对齐 */
}
.picture.ant-col {
  display: flex;
  /deep/ .ant-form-item-label {
    height: 195px !important;
    border-right: none !important;
    line-height: 195px;
    text-align: center;
  }
}
.formStyle {
  padding: 0.2rem;
  /deep/.ant-col {
    height: unset;
  }
  .ant-form-inline .ant-form-item-with-help {
    margin-bottom: 5px;
  }
}
.form-wrapper {
  padding: 32px 25px 20px 25px;
  .imageRow {
    min-height: 1.4rem;
    border: 0.01rem solid #0855cc;
    border-top: none;
    // border-bottom: none;
    /deep/ .ant-form-item-label {
      height: 1.4rem !important;
      line-height: 1.4rem;
    }
    /deep/.avatar-uploader {
      // height: 118px;
      // width: 90px;
      // margin-top: 22px;
      // padding-left: 30px;
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      //gap: 8px;

      .ant-upload {
        width: 100%;
        height: 1rem !important;
        background: unset;
        border: 0;
        // height: 18px;
        // width: 192px;
        display: flex !important;
      }
      /* .upload-img {
        height: 180px;
        width: 200px;
      } */
      .ant-upload-list.ant-upload-list-picture-card {
        display: flex !important;
      }
      .ant-upload-list-picture-card-container,
      .ant-upload-list-item {
        height: 90px;
        width: 118px;
        margin-top: 12px;
        margin-left: 6px;
      }
      /*  .ant-upload-select-picture-card {
        background: url('../../../../assets/imgs/upload-img-bg.png') no-repeat;
        background-size: 100% 100%;
      } */
      /*  .ant-upload-list-item {
        border: 1px solid #0855cc;
      } */
    }
  }
  .pictIcon {
    width: 110px;
    height: 80px;
  }
  .imgText {
    font-size: 12px;
    color: #fff;
  }

  .form-table-style {
    /deep/.ant-form-item-label {
      background: #084dbe;
      border: 1px solid #0855cc;
      padding-left: 12px;
      height: 100%;
      flex-shrink: 0;
      > label {
        font-weight: 500;
        font-size: 14px;
        color: #8fbbff;
      }
    }
    /deep/.ant-form-explain {
      position: absolute;
      z-index: 10;
      bottom: -5px;
      left: 10px;
    }
    /deep/.ant-form-item-control-wrapper {
      flex: 1;
      height: 100%;
    }
    /deep/.ant-form-item {
      align-items: stretch;
      margin-right: 0;
      height: 46px;
      display: flex;
    }
    /deep/.ant-form-item-with-help {
      margin-right: 0;
      margin-bottom: 0;
    }
    /deep/.ant-form-item-control {
      height: 100%;
      .ant-form-item-children {
        height: 100%;
        display: block;
        .ant-input {
          height: 100%;
          background: #07429e;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #0855cc;
          color: #fff;
          &::placeholder {
            color: #6ea7ff;
          }
        }
        .ant-select {
          height: 100%;
          vertical-align: top;
        }

        .ant-calendar-picker {
          height: 100%;
          > div {
            height: 100%;
          }
        }
        .ant-select-selection {
          height: 100%;
          background: #0a49af;
          border: 0;
          border-radius: 0;
        }
        .select-jurisdiction {
          width: 339px;
        }

        .ant-select-selection__rendered {
          height: 100%;
        }
        .ant-select-selection-selected-value {
          line-height: 42px;
          color: #fff;
        }
        .ant-select-selection__placeholder {
          color: #6ea7ff;
        }
      }
    }
    .right-box-width {
      max-width: 480px;
    }
  }
}

.imageUpload {
  margin-bottom: 150px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 150px;
      height: 176px;
      background: var(--theme-input-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 150px;
    height: 176px;
  }

  /deep/ .ant-upload-list-item {
    width: 150px;
    height: 176px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }
}
</style>
